<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        #div1{background: red;}
        #div2{background: blue;}
    </style>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        /*
            val()  value  获取/设置表单元素的值   JQ取值只能去第一个符合条件元素的值  
                    赋值会批量操作，对所有获取到的元素进行赋值
            size()  输出，当前以及获取到的网页元素的个数  

            hide()  隐藏 
            show()  显示   第一个参数：动画持续的毫秒数   第二个参数：回调函数，动画结束的时候执行
                动画效果是，从左上角收起和从左上角展开

            slideDown()
            slideUp()    动画效果是卷闸效果

            fadeIn()
            fadeOut()   动画效果是淡入淡出
            fadeTo(动画持续时间，透明度，回调函数)

            animate   运动形式是     慢快慢"swing"
                                    匀速"leaner"
            stop()  停止第一个动画，当时后续动画正常运动
            stop(true)  停止所有动画
            stop(true,true)  停止所有动画，并且将当前正在进行的动画，直接到达目的值
            finish()  停止所有动画，并且将所有动画的都到达目的值
            delay()  延迟
        */
       $(function(){
           $("#div1").hover(function(){
               /*
               $("#div2").hide(2000,function(){
                   $("#div1").html("移入");
               });*/ 
               $("#div2").stop().animate({
                   width:300,
                   height:300,
                   opacity:0.5
               },4000,function(){
                   $("#div1").html("移入");
               })
           },function(){
               /*
               $("#div2").show(2000,function(){
                   $("#div1").html("移出");
               });*/
               $("#div2").stop().animate({
                   width:200,
                   height:200,
                   opacity:1
               },4000,function(){
                   $("#div1").html("移出");
               })
           })
       })
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>